<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>大连高校环境联盟</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.min.css">
    <link rel="stylesheet" type="text/css" href="css/mricode.pagination.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/hv.css">
    <link rel="stylesheet" type="text/css" href="css/user.css">

    <!-- Javascript -->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/bootstrap-dialog.min.js"></script>
    <script type="text/javascript" src="js/mricode.pagination.js"></script>
   
    <script type="text/javascript" src="js/sign-up-in.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
</head>
</head>

<body>
    <div>
        <div style="background-color: #036eb8; height: 3px"></div>
        <div style="background-image: url('images/bg1.gif'); height: 120px;">
            <div class="container">
                <div class="pull-right" style="margin-top: 10px;">
                    <a href="#" style="font-size: 13px;" id="exit">注销</a>
                </div>
                <div class="pull-right" style="margin-top: 10px; margin-right: 10px">
                    <a href="#" style="font-size: 13px;" id="seeHello"></a>
                </div>
                <div class="container" style="padding-top: 15px">
                    <img src="images/logo_title.png" alt="logo">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12">
                    <nav class="navbar navbar-default no-radius" role="navigation">
                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav" id="nav">
                                <li  id="test_home" class="guest">
                                    <a href="home.html">首页</a>
                                </li>
                                <li class="dropdown guest">
                                    <a href="introduction.html?page=0" class="dropdown-toggle" data-toggle="dropdown">了解我们</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="introduction.html?page=0">槐盟介绍</a></li>
                                        <li><a href="introduction.html?page=1">联系我们</a></li>
                                        <li><a href="introduction.html?page=2">活动图片</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown guest">
                                    <a href="activity.html" class="dropdown-toggle" data-toggle="dropdown">活动</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="activity.html">活动预告</a></li>
                                        <li><a href="index.html?menu=activity&type=PRESENTATION">活动展示</a></li>
                                        <li><a href="index.html?menu=activity&type=ACTIVITY">槐盟新闻</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown guest">
                                    <a href="index.html?menu=knowledge&type=PROJECT" class="dropdown-toggle" data-toggle="dropdown">科普知识</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="index.html?menu=knowledge&type=PROJECT">项目知识</a></li>
                                        <li><a href="index.html?menu=knowledge&type=WELFARE">公益知识</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown user">
                                    <a href="index.html?menu=private_activity&type=OFFICE" class="dropdown-toggle" data-toggle="dropdown" id="hh">内部活动</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="index.html?menu=private_activity&type=OFFICE">办公室</a></li>
                                        <li><a href="index.html?menu=private_activity&type=RELATIONS">外联部</a></li>
                                        <li><a href="index.html?menu=private_activity&type=PUBLICITY">宣传部</a></li>
                                        <li><a href="index.html?menu=private_activity&type=FINANCIAL">财务部</a></li>
                                        <li><a href="index.html?menu=private_activity&type=PROJECT">项目部</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown user">
                                    <a href="index.html?menu=training&type=OFFICE" class="dropdown-toggle" data-toggle="dropdown">培训</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="index.html?menu=training&type=OFFICE">办公室</a> </li>
                                        <li><a href="index.html?menu=training&type=RELATIONS">外联部</a> </li>
                                        <li><a href="index.html?menu=training&type=PUBLICITY">宣传部</a> </li>
                                        <li><a href="index.html?menu=training&type=FINANCIAL">财务部</a> </li>
                                        <li><a href="index.html?menu=training&type=PROJECT">项目部</a> </li>
                                    </ul>
                                </li>
                                <li class="dropdown user">
                                    <a href="index.html?menu=notice&type=PROJECT" class="dropdown-toggle" data-toggle="dropdown">公示</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="index.html?menu=notice&type=PROJECT">项目一览</a></li>
                                        <li><a href="index.html?menu=notice&type=HM">槐盟公示</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown user">
                                    <a href="individual.html" class="dropdown-toggle" data-toggle="dropdown">个人中心</a>
                                    <!--<ul class="dropdown-menu">-->
                                        <!--<li><a href="individual.html" onclick="showDiv(0)">个人信息</a></li>-->
                                        <!--<li><a href="individual.html" onclick="showDiv(1)">信息修改</a></li>-->
                                    <!--</ul>-->
                                </li>
                                <li class="dropdown manager">
                                    <a href="manager.html" class="dropdown-toggle" data-toggle="dropdown">用户管理</a>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-right" role="search" style="width:20%;display:none">
                                <div class="form-group input-group">
                                    <input type="text" class="form-control no-radius" />
                                    <div class="input-group-btn">
                                        <button type="submit" class="btn btn-default no-radius">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-3">
                    <div class="panel panel-primary no-radius">
                        <div class="panel-heading no-radius">
                            <h3 class="panel-title">个人中心</h3>
                        </div>
                        <ul class="list-group no-radius">
                            <li class="list-group-item no-radius" id="user-info" onclick="showDiv(0)" style="cursor: pointer"><a href="#">个人信息</a></li>
                            <li class="list-group-item no-radius" id="re-pwd" onclick="showDiv(1)" style="cursor: pointer"><a href="#">信息修改</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-9" id="content-view">
                    <div class="content">
                        <div>
                            <p>个人中心 - 个人信息</p>
                            <p style="color: #046eB8; font-size: 18px; font-weight: bold;">个人信息</p>
                            <hr>
                        </div>
                        <form class="form-horizontal" role="form" style="min-height:450px;" id="touForm">
                            <div class="form-group">
                                <label for="tname" class="control-label col-xs-3">自然名</label>
                                <label id="account" class="label_show"></label> 
                            </div>
                            <div class="form-group">
                                <label for="email" class="control-label col-xs-3">邮箱</label>
                                <label id="email" class="label_show"></label> 
                            </div>
                        </form>
                    </div>
                    <div class="content">
                        <div>
                            <p>个人中心 - 修改信息</p>
                            <p style="color: #046eB8; font-size: 18px; font-weight: bold;">修改信息</p>
                            <hr>
                        </div>
                        <form class="form-horizontal" role="form" style="min-height:450px;" id="touForm">
                        <div class="form-group">
                                <label for="tname" class="control-label col-xs-3" >新自然名</label>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control"  id="newName" onblur="checkAccount(this)">
                                </div>
                                <div class="check-result" id="statu_account"></div>
                            </div>
                            <div class="form-group">
                                <label for="tname" class="control-label col-xs-3">原密码</label>
                                <div class="col-xs-5">
                                    <input type="password" class="form-control"  id="pwd" onchange="checkPsw(this)" placeholder="请输入原密码">
                                </div>
                                <div class="check-result" id="pwd"></div>
                            </div>
                            <div class="form-group">
                                <label for="tname" class="control-label col-xs-3">新密码</label>
                                <div class="col-xs-5">
                                    <input type="password" class="form-control "onchange="checkPsw(this)" onkeyup ="pwd1Check()" autocomplete="off" id="pwd1" placeholder="请输入新密码">
                                </div>
                                <div class="check-result" id="statu_pwd1"></div>
                            </div>
                            <div class="form-group">
                                <label for="tname" class="control-label col-xs-3">确认密码</label>
                                <div class="col-xs-5">
                                    <input type="password" class="form-control" onkeyup ="pwd2Check()" autocomplete="off" id="pwd2" placeholder="请再次输入密码">
                                </div>
                                 <div class="check-result" id="statu_pwd2"></div>
                            </div>
                            <div>
                                <button type="button" class="btn btn-primary" style="margin-left:40%;border-radius: 4px;width:8%;" id="save">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="footer">
                    <div class="item">
                        <a href="introduction.html?page=0" style="margin-right: 5px;">关于我们</a>
                        <a href="introduction.html?page=1" style="margin-left: 5px;">联系我们</a>
                    </div>
                    <div class="item">
                        <label style="color:#8a8a8a;font-weight: normal">&copy 版权所有 大连理工大学红蚂蚁实验室</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <script type="text/javascript" src="js/user.js"></script>
</body>

</html>
<script>


//动态显示页面
$(function() {
     $.ajax({
        type: 'post',
        url: 'user/info',
        success: function(result) {
            $("#account").html(result.user.username);
            $("#newName").val(result.user.username);
            $("#email").html(result.user.email);
            showDiv(0);
        },
        fail: function() {
            alertWarning("failed");
        },
        error: function(response) {
            alert("网络错误");
        }
    });
})

$("#save").bind("click", function(){
      var newName=$('#newName').val();
            newName.trim();//过滤空格
            if(newName.length==0||newName.length>20){ 
                if(newName.length==0){
                    alertWarning("用户名不能为空")
                }else{
                    alertWarning("用户名长度超过20") 
                }
                return;
            }

        var rePwd=/[A-Za-z0-9\.\_]{6,12}/;
        if(!rePwd.test($('#pwd1').val())){ 
            if($('#pwd1').val().length==0){
                alertWarning("密码不能为空");
            }
            else{
                alertWarning("密码格式有误")
            } 
            return false;
        }
        var pwd1=$('#pwd1').val();
        var pwd2=$('#pwd2').val();
        if(pwd1!=pwd2){
            alertWarning("两次密码输入不一致");
            return false;
        }

        $.ajax({
        type: 'post',
        url: 'user/update-info',
        data: {
                "oldPassword": $('#pwd').val(),
                "newPassword": pwd1,
                "newUsername":$('#newName').val(),
        },
        success: function(modle) {
            if(modle.result){
                alertInfo("修改成功");
            }
            else{
                alertWarning("修改失败");
            }
            
        },
        fail: function() {
            alert("failed");
        },
        error: function(response) {
            alert("网络错误");
        }
    });

})
$("#exit").bind("click", function(){
        $.ajax({
            type: 'post',
            url: 'user/logout',
            success: function(result) {
                alertInfo(result.message);
                window.location.href = "../";//有问题，模态框闪退或不显示
            },
            fail: function() {
                alert("failed");
            },
            error: function(response) {
                alert("网络错误");
            }
        });

})

function showDiv(num) {
    var length = $("#content-view").children().size();
    for (var i = 0; i < length; i++) {
        if (num == i) {
            $("#content-view").children().eq(i).show();
        } else {
            $("#content-view").children().eq(i).hide();
        }
    }
}


</script>
